<template>
    <div
        :class="['w-full text-20 p-24 box-border', { 'min-loading-height': isLoading }]"
        v-loading="isLoading"
        element-loading-text="加载中....."
    >
        <template v-if="!isLoading">
            <!-- 顶部 -->
            <PageHeader title="活动分析" :is-data-loading="isLoading" @refresh="resetList"/>
            <!-- 第一层 -->
            <div class="w-full flex-between-box flex-wrap">
                <!-- 左侧四条数据 -->
                <div class="first-container flex-wrap flex-between-box">
                    <div
                        class="activity-data flex-between-box flex-col card-style common-shadow px-24 mb-24"
                        v-for="(item, index) in activityData"
                        :key="index"
                    >
                        <!-- 上 -->
                        <div class="w-full flex-between-box">
                            <!-- 数据描述 -->
                            <span class="text-14 text-t-secondary">{{ item.name }}</span>
                            <!-- 提示图标 -->
                            <template v-if="item.content">
                                <el-popover
                                    placement="bottom"
                                    trigger="hover"
                                    :content="item.content"
                                    :width="200"
                                >
                                    <template #reference>
                                        <Icon name="Warning" :size="18" class="text-t-secondary cursor-pointer"/>
                                    </template>
                                </el-popover>
                            </template>
                        </div>
                        <!-- 中 -->
                        <div class="text-30 mt-12">
                            <template v-if="index === 3">￥</template>{{ item.num }}
                        </div>
                        <template v-if="index === 1">
                            <el-progress :percentage="60" :stroke-width="10" :show-text="false" />
                        </template>
                        <template v-else>
                            <div class="text-14 mt-12 text-t-default flex-between-items-box">
                                <span>{{ item.dayDataDesc }} {{ item.dayData }}</span>
                                <div class="flex-items-box">日同比
                                    <Icon :name="item.isUp ? 'CaretTop' : 'CaretBottom'" :class="['mx-8', item.isUp ? 'text-success' : 'text-warning']"/>
                                    {{ item.compareYes }}
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="first-container flex-wrap flex-between-box card-style common-shadow">
                    <EChartsContainer title="访问量趋势" :options="sevenDayAddOptions" id="sevenDayChangeECharts"/>
                </div>
            </div>
            <!-- 第二层 -->
            <div class="w-full flex-between-box flex-wrap mt-24">
                <!-- 左侧四条数据 -->
                <div class="second-container flex-wrap flex-between-box">
                    <div class="card-style common-shadow second-container-left box-border">
                        <EChartsContainer
                            title="销售类别占比"
                            :options="agePropOptions"
                            id="agePropECharts"
                        />
                    </div>
                    <div class="card-style common-shadow second-container-left">
                        <EChartsContainer title="访问时段分布" :options="ageNumOptions" id="ageNumECharts"/>
                    </div>
                </div>
                <div class="second-container flex-wrap flex-between-box card-style common-shadow">
                    <EChartsContainer title="销售额趋势" :options="sevenDayAddOptions" id="sevenDayChangeEChartss"/>
                </div>
            </div>
            <!-- 图标数据 -->
            <!--            <div class="w-full flex-between-box flex-wrap">-->
            <!--                &lt;!&ndash; 第三层 &ndash;&gt;-->
            <!--                <div class="w-full flex-between-box">-->
            <!--                    <div class="fourth-container-side echarts-box">-->
            <!--                        <EChartsContainer title="会员状态分布" :options="statusOptions" id="statusECharts"/>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--                &lt;!&ndash; 第四层 &ndash;&gt;-->
            <!--                <div class="w-full flex-between-box">-->
            <!--                    <div class="third-container-side echarts-box">-->
            <!--                        <EChartsContainer title="会员性别分布" :options="sexOptions" id="sexECharts"/>-->
            <!--                    </div>-->
            <!--                    <div class="third-container-middle echarts-box">-->
            <!--                        <EChartsContainer title="会员年龄段数量分布" :options="ageNumOptions" id="ageNumECharts"/>-->
            <!--                    </div>-->
            <!--                    <div class="third-container-side echarts-box-age-prop">-->
            <!--                        <EChartsContainer-->
            <!--                            title="会员年龄段占比"-->
            <!--                            :isLeft="true"-->
            <!--                            :options="agePropOptions"-->
            <!--                            id="agePropECharts"-->
            <!--                        />-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--                &lt;!&ndash; 第五层 &ndash;&gt;-->
            <!--                <div class="w-full flex-between-box">-->
            <!--                    <div class="fifth-container echarts-box"/>-->
            <!--                    <div class="fifth-container echarts-box">-->
            <!--                        <EChartsContainer title="近一年会员总量变化" :options="yearChangeOptions" id="yearChangeECharts"/>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
        </template>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { MonthEnum } from '@/type/common'
import { getRndInteger, timeout } from '@utils/methods'
import EChartsContainer from '@components/EChartsContainer/index.vue'
import PageHeader from '@/components/PageHeader/index.vue'
import Icon from '@/components/Icon/index.vue'
import dayjs from 'dayjs'

// 是否加载中
const isLoading = ref(true)

// 顶部数据
interface ActivityData {
    /** @description 活动数据描述 */
    name: string
    /** @description 活动数据 */
    num: number | string
    /** @description 当日数据描述 */
    dayDataDesc?: string
    /** @description 当日数据 */
    dayData?: number
    /** @description 同比数据 */
    compareYes?: string
    /** @description 同比上升下降 */
    isUp?: boolean
    /** @description 提示文本 */
    content?: string
}

// 顶部数据展示
const activityData = ref<ActivityData[]>([
    {
        name: '访问量',
        num: 1232,
        dayDataDesc: '日访问量',
        dayData: 322,
        compareYes: '11.3%',
        isUp: true,
        content: '活动期间进入活动页的人次'
    },
    {
        name: '活动目标达成率',
        num: '60%'
    },
    {
        name: '活动成交总单数',
        num: 400,
        dayDataDesc: '日成交单数',
        dayData: 28,
        compareYes: '12.9%',
        isUp: true,
        content: '活动期间成交的总单数'
    },
    {
        name: '活动销售总额',
        num: 11200,
        dayDataDesc: '日销售额',
        dayData: 3224,
        compareYes: '4.3%',
        isUp: false,
        content: '活动期间成交的总销售额'
    }
])

// 临时函数，进行百分比取数
const numFun = (total: number, prop: number) => Number((total * (prop / 100)).toFixed(0))

// 会员状态分布
const statusOptions = ref({})
// 会员性别分布
const sexOptions = ref({})

// 近 7 日会员总量变化
const sevenDayAddOptions = ref({})
// 近一年会员总量变化
const yearChangeOptions = ref({})

// 会员年龄段数量
const ageNumOptions = ref({})
// 会员年龄段占比
const agePropOptions = ref({})
// 标签列表
const labelList: string[] = [
    '二次元', '九零后', '热爱', '小众化', '年轻', '团购', '代名词', '佛系', '运动', '吃货',
    '垮掉', '个性', '发际线', '阅读', '熬夜', '可乐', '游戏', '代码', '计算机', '消费',
    '购买', '单身', '高活跃', '美妆', '吃肉', '汉服', '机车', '单身', '年轻', '技术',
    '日常', '火锅', '玲娜贝儿', '小胖', '没想到', '家人', '康康', '小红书', '愿望', '旧物',
    '小熊猫', '探店', '幸福', '新时尚', '贴纸', '手机壳', '泡泡', '玻璃', '戒指'
]
// 会员标签数据
const labelData: Record<string, any>[] = reactive([])

// 盒子宽 700 高 330
const boxWidth = 700 - 50
const labelPosition = [
    { top: 120, left: boxWidth / 2 - 45, fontSize: 52 }, { top: 110, left: 440, fontSize: 45 },
    { top: 175, left: 410, fontSize: 32 }, { top: 80, left: 350, fontSize: 34 },
    { top: 145, left: 180, fontSize: 50 }, { top: 110, left: 220, fontSize: 30 },
    { top: 65, left: 250, fontSize: 32 }, { top: 100, left: 175, fontSize: 20 },
    { top: 125, left: 157, fontSize: 20 }, { top: 205, left: 240, fontSize: 32 },
    { top: 105, left: 295, fontSize: 15 }, { top: 185, left: 330, fontSize: 30 },
    { top: 105, left: 120, fontSize: 16 }, { top: 177, left: 306, fontSize: 14 },
    { top: 55, left: 445, fontSize: 20 }, { top: 210, left: 515, fontSize: 18 },
    { top: 165, left: 480, fontSize: 20 }, { top: 100, left: 580, fontSize: 15 },
    { top: 80, left: 500, fontSize: 25 }, { top: 153, left: 618, fontSize: 16 },
    { top: 180, left: 590, fontSize: 15 }, { top: 90, left: 465, fontSize: 14 },
    { top: 155, left: 110, fontSize: 20 }, { top: 170, left: 530, fontSize: 27 },
    { top: 215, left: 435, fontSize: 27 }, { top: 150, left: 575, fontSize: 15 },
    { top: 35, left: 365, fontSize: 34 }, { top: 225, left: 310, fontSize: 20 },
    { top: 125, left: 66, fontSize: 20 }, { top: 75, left: 205, fontSize: 20 },
    { top: 220, left: 370, fontSize: 30 }, { top: 250, left: 340, fontSize: 14 },
    { top: 200, left: 160, fontSize: 16 }, { top: 130, left: 115, fontSize: 14 },
    { top: 40, left: 290, fontSize: 16 }, { top: 195, left: 488, fontSize: 13 },
    { top: 182, left: 135, fontSize: 14 }, { top: 76, left: 153, fontSize: 14 },
    { top: 222, left: 199, fontSize: 14 }, { top: 45, left: 236, fontSize: 15 },
    { top: 252, left: 260, fontSize: 17 }, { top: 235, left: 495, fontSize: 14 },
    { top: 250, left: 430, fontSize: 14 }, { top: 127, left: 589, fontSize: 14 },
    { top: 54, left: 195, fontSize: 14 }, { top: 244, left: 205, fontSize: 15 },
    { top: 265, left: 378, fontSize: 15 }, { top: 84, left: 98, fontSize: 15 },
    { top: 224, left: 149, fontSize: 15 }
]

// 初始化标签
const initLabelData = () => {
    labelList.forEach((item, index) => {
        const colorArr: string[] = [
            '#F16868', '#3BA272', '#73C0DE', '#FAC858', '#5470C6', '#FC8331',
            '#B5DFE8', '#FA81AC', '#41B883', '#9A9A9A', '#E34942', '#FB9973'
        ]
        const { top = 10, left = 10, fontSize = 14 } = labelPosition[index] || {}
        labelData.push({
            top,
            left,
            fontSize,
            name: labelList[index],
            color: colorArr[getRndInteger(0, colorArr.length - 1)]
        })
    })
}

initLabelData()

setTimeout(async () => {
    await timeout(500)
    isLoading.value = false
    await nextTick()
    /**
     * 模拟后端返回值
     * */
    // 顶部数据
    const topResData = [103411, 224, '22%', '34%']
    // 总人数
    const total = <number>topResData[0]
    // 近7日新增会员量
    const newAddNum = <number>topResData[1]
    // echarts 数据
    const { sexData, statusData, sevenDayAddData, yearChangeData, ageNumData, agePropData } = {
        sexData: [
            { value: numFun(total, 32), name: '男' },
            { value: numFun(total, 67), name: '女' }
        ],
        statusData: [numFun(total, 35), numFun(total, 43), numFun(total, 22)],
        sevenDayAddData: [
            numFun(newAddNum, 7),
            numFun(newAddNum, 13),
            numFun(newAddNum, 27),
            numFun(newAddNum, 15),
            numFun(newAddNum, 7),
            numFun(newAddNum, 20),
            numFun(newAddNum, 11)
        ],
        yearChangeData: [
            numFun(total, 22),
            numFun(total, 42),
            numFun(total, 46),
            numFun(total, 55),
            numFun(total, 57),
            numFun(total, 60),
            numFun(total, 62),
            numFun(total, 68),
            numFun(total, 88),
            numFun(total, 90),
            numFun(total, 97),
            numFun(total, 100)
        ],
        ageNumData: [
            numFun(total, 18),
            numFun(total, 38),
            numFun(total, 20),
            numFun(total, 12),
            numFun(total, 8),
            numFun(total, 4)
        ],
        agePropData: [18, 38, 20, 12, 8, 4]
    }
    console.log(sevenDayAddData)

    /**
     * 会员性别数据
     * */
    sexOptions.value = {
        tooltip: {
            trigger: 'item',
            valueFormatter(value: number) {
                return `${value}人 ${((value * 100) / total).toFixed(0)}%`
            }
        },
        // 设置数据说明的垂直水平位置
        legend: {
            top: '2%',
            left: 'center'
        },
        // 数据填充色
        color: ['#A3D0E9', '#E6779F'],
        //
        series: [
            {
                type: 'pie',
                // 组件上边距
                top: '8%',
                name: '人数占比',
                // 饼图内外边距
                radius: ['0', '87%'],
                // 图形样式 - 图形边框
                itemStyle: {
                    borderRadius: 8,
                    borderColor: '#FFF',
                    borderWidth: 8
                },
                // 饼图文本标签
                label: {
                    // 是否展示文本标签
                    show: false
                },
                data: sexData
            }
        ]
    }

    /**
     * 会员状态数据
     * */
    statusOptions.value = {
        tooltip: {
            trigger: 'item'
        },
        // x 轴
        xAxis: {
            type: 'category',
            data: ['沉睡', '正常', '活跃'],
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value'
        },
        // 柱状图颜色
        color: ['#FB7F30'],
        grid: {
            left: '15%'
        },
        series: [
            {
                data: statusData,
                type: 'bar',
                name: '会员数量',
                // 柱状图宽度
                barWidth: '25%'
            }
        ]
    }

    /**
     * 近 7 日会员增量变化
     * */
    // 近 7 日日期
    const sevenDay = []
    for (let day = 0; day <= 6; day++) {
        sevenDay.push(dayjs().subtract(day, 'day').format('MM-DD'))
    }
    sevenDayAddOptions.value = {
        // 提示框
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            data: sevenDay.reverse()
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                data: sevenDayAddData.reverse(),
                type: 'line'
            }
        ]
    }

    /**
     * 近一年会员总量变化
     * */
    // 近一年月份
    const months = []
    for (let month = 0; month <= 11; month++) {
        months.push(MonthEnum[Number(dayjs().subtract(month, 'month').format('M'))])
    }
    yearChangeOptions.value = {
        // 提示框
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            data: months.reverse()
        },
        yAxis: {
            type: 'value',
            // 修改分割线样式
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                data: yearChangeData,
                type: 'line',
                name: '会员总量',
                smooth: true
            }
        ]
    }

    /**
     * 会员年龄段数量
     * */
    ageNumOptions.value = {
        // 提示框
        tooltip: {
            trigger: 'item'
        },
        grid: {
            left: '20%'
        },
        // x 轴配置
        xAxis: {
            // 坐标轴类型 - value 数值轴
            type: 'value'
        },
        // y 轴配置
        yAxis: {
            // 坐标轴类型 - category 类目轴
            type: 'category',
            data: ['0-7点', '7-12点', '12-16点', '16-20点', '20-22点', '22-24点']
        },
        // 图标类型配置
        series: [
            {
                // 柱状图
                type: 'bar',
                // 图表数据
                data: ageNumData.reverse(),
                // 提示文本
                name: '年龄',
                // 显示背景色
                showBackground: true,
                // 背景颜色
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    }

    /**
     * 会员年龄占比
     * */
    const agePropName: Record<string, string | number>[] = [
        { name: '类别一' },
        { name: '类别二' },
        { name: '类别三' },
        { name: '类别四' },
        { name: '类别五' }
    ]
    agePropName.forEach((item, index) => {
        item.value = agePropData[index]
    })
    agePropOptions.value = {
        // 提示框
        tooltip: {
            trigger: 'item',
            // 格式化提示值
            valueFormatter(value: number) {
                return `${value}%`
            }
        },
        series: [
            {
                name: '年龄占比',
                // 饼图
                type: 'pie',
                // 中间圆的大小、整体圆的大小
                radius: [65, 115],
                // 距离左端和上端的位置
                center: ['50%', '50%'],
                // 展示模式 - 扇形圆心角展现 radius
                // 每一段扇形的圆角
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#FFF',
                    borderWidth: 5
                },
                data: agePropName
            }
        ]
    }
}, 200)

// 刷新数据
const resetList = () => {
    console.log('111')
}
</script>

<style lang="less" scoped>
// 第一层
.first-container {
    width: calc(50% - 12px);
    height: 324px;

    .activity-data{
        width: calc(50% - 12px);
        height: 150px;

        //div:first-child{
        //    font-family: "Dubai Light", serif;
        //}

        .iconfont {
            font-size: 65px;
        }

        .icon-wenhao{
            font-size: 20px;
        }
    }
}

.second-container{
    width: calc(50% - 12px);
    height: 380px;

    .second-container-left{
        width: calc(50% - 12px);
        height: 100%;
    }
}

.third-container-side {
    width: calc((100% - 50px) / 4);
    height: 380px;
}

.third-container-middle {
    width: calc((100% - 50px) / 2);
    height: 380px;
}

.fourth-container-side{
    width: calc((100% - 25px) / 2);
    height: 380px;
}

.fifth-container{
    width: calc((100% - 25px) / 2);
    height: 420px;
}

</style>
